<template>
	<view class="password_box">
		<navBar>
			<template @click="backPage()" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
			</template>
			<template class="centerText" slot="center">
				<view class="" style="color: #fff">修改密码</view>
			</template>
		</navBar>
		<view class="information_entry">
			<u--form labelPosition="left" ref="uForm" labelWidth="80" :rules='rules' :model="formData">
				<u-form-item required label="原密码" borderBottom ref="item1" prop="old_password">
					<u--input v-model.trim()="formData.old_password" placeholder="请输入原密码" disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>
				<u-form-item required label="新密码" borderBottom ref="item1" prop="new_password">
					<u--input v-model.trim()="formData.new_password" placeholder="请输入新密码" disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>
				<u-form-item required label="确认密码" prop='check_password' borderBottom ref="item1">
					<u--input v-model.trim()="formData.check_password" placeholder="请再次输入新密码" disabledColor="#ffffff"
						border="none"></u--input>
				</u-form-item>
			</u--form>
			<view class="btn_box">
				<view @click="submit()" class="btn">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		editpwdApi
	} from '@/api/login.js'
	export default {
		data() {
			return {
				formData: {
					old_password: '',
					new_password: '',
					check_password: ''
				},
				rules: {
					old_password: [{
							required: true,
							message: '请输入原密码',
							trigger: ['blur']
						},
						{
							min: 6,
							max: 12,
							message: '密码长度在6到12个字符',
						}
					],
					new_password: [{
							required: true,
							message: '请输入新密码',
							trigger: ['blur']
						},
						{
							min: 6,
							max: 12,
							message: '密码长度在6到12个字符',
						}
					],
					check_password: [{
						validator: (rule, value, callback) => {
							if (value === "") {
								callback(new Error("请再次输入新密码"));
							} else if (value !== this.formData.new_password) {
								callback(new Error("两次输入密码不一致!"));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur'],
					}, ]
				}
			};
		},
		components: {
			navBar
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			backPage() {
				uni.navigateBack();
			},
			async submit() {
				await this.$refs.uForm.validate()
				await editpwdApi({
					old_password: this.formData.old_password,
					new_password: this.formData.new_password
				})
				uni.$u.toast('密码修改成功，请重新登录')
				setTimeout(() => {
					this.$store.commit('user/REMOVE_USER_INFO')
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	.password_box {
		// background-color: #f3f4f6;
		min-height: 100vh;

		.information_entry {
			// background-color: #fff;
			margin: 10rpx;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;

			::v-deep .u-form-item__body__left {
				margin-left: 20rpx;
			}
		}

		.btn_box {
			display: flex;
			justify-content: center;
			margin-top: 100rpx;

			.btn {
				width: 300rpx;
				height: 70rpx;
				background-color: #39cccc;
				color: #fff;
				text-align: center;
				line-height: 70rpx;
				border-radius: 35rpx;

			}
		}
	}
</style>